<html>
  <head>
    <title>file name input</title>
    <style>
    
    widget[type=file-name] {
      prototype: FileName;
      flow:horizontal;
      width:20em;
    }
    widget[type=file-name] > input { width:*; }
    
    </style>
    <script type="text/tiscript">
    
    class FileName : Behavior {
      function attached() {
        this.$append( <input|text.path><button.selector>&#x2026;</button>);
        
        var path = this.path = this.$(.path);
        
        this.$(button.selector) << event click() {
          const filter = "HTML Files (*.htm,*.html)|*.htm;*.html|All Files (*.*)|*.*";
          var fn = view.selectFile(#open,filter);
          if( fn ) path.value = fn;
          (this super).postEvent(Event.EDIT_VALUE_CHANGED);
        };
      }
      
      property value(v) {
        get { return this.path.value; }
        set { this.path.value = v; }
      }
    }
    
    $(widget).onValueChanged = function() {
      stdout.println(this.value);
    };

    </script>
  </head>
<body>
  File name:
  
  <widget|file-name name=test />

</body>
</html>
